import React, { useState, useEffect } from "react";
import styles from './styles.less'
import antd, {
  Button,
  Card,
  Form,
  Input,
  Space,
  Table
} from 'antd'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
const Page: React.FC<{}> = props => {

  const [columus, setColumus] = useState([])
  const [pushCode, setPushCode] = useState('')
  const [tableItemForm] = Form.useForm()
  // 生成columus
  // 模拟数据
  // 添加表单功能
  useEffect(() => {
    console.log(pushCode)
  }, [pushCode])
  return <div className={styles.page}>
    <Card title="列表">
      <Form
        form={tableItemForm}
      >

        <Form.List name="columus">
          {(fields, { add, remove }) => <>
            {
              fields.map(field => <Space key={field.key} align="baseline">
                <Form.Item {...field} label="表头名称" name={[field.name, 'title']} fieldKey={[field.fieldKey, 'title']} required>
                  <Input />
                </Form.Item>
                <Form.Item {...field} label="表头键值" name={[field.name, 'dataIndex']} fieldKey={[field.fieldKey, 'dataIndex']} required>
                  <Input onKeyDown={(e) => {
                    if(e.code === 'Tab') add()
                  }}/>
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(field.name)} />
              </Space>)
            }
            <Form.Item>
              <Space>
                <Button type="primary" onClick={() => add()}>增加</Button>
                <Button onClick={() => {
                  tableItemForm.validateFields().then(d => {
                    setColumus(d.columus.map(i => ({...i, key:i.dataIndex})))
                  })
                }}>预览</Button>
                <Button onClick={() => {
                  tableItemForm.setFieldsValue({
                    columus: [
                      {title: "得意", dataIndex: 'deyi'}
                    ]
                  })
                }}>导出代码</Button>
              </Space>
            </Form.Item>
          </>}
        </Form.List>
      </Form>
      <Table columns={columus} />
    </Card>
  </div>
}

export default Page